<template>
	<div class="ui-table">
		<center v-loading="isLoad">
			<el-table max-height="100%" height="100%" stripe :data="data" :show-header="showheader"
			:highlight-current-row="tableHihlightCurrentRow" @current-change="tablehandleCurrentChange"
			@row-click="rowClick" @selection-change="handleSelectionChange" ref="multipleTable">
				<el-table-column type="selection" :width="selectWidth" v-if="isCheckBox"></el-table-column>
				<template v-for="(column,index) of myColums">
					<el-table-column v-if="column.type=='slot'" :label="column.label" :prop="column.prop" :width="column.width">
						<template slot-scope="scope" >
							<slot :name="column.prop" :row="scope.row" :value="scope.row[column.prop]"></slot>
						</template>
					</el-table-column>
					<el-table-column v-else :type="column.type" :index="indexMethod" :label="column.label"
					 :prop="column.prop" :width="column.width" :show-overflow-tooltip="true"></el-table-column>
				</template>
				<el-table-column v-if="isAuto">
					<template slot-scope="scope">
						<slot :row="scope.row"></slot>
					</template>
				</el-table-column>
				<el-table-column v-if="false" align="center" label="操作">
					<template slot-scope="scope">
						<el-button type="primary" size="small" @click.native.stop="handleClick(scope.row)">查看原视频</el-button>
					</template>
				</el-table-column>
			</el-table>
		</center>
		<footer>
			<el-pagination v-if="isPagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
			 :current-page="currentPage" :pager-count="pagerCount" :page-sizes="[10, 20, 40, 60, 80, 100]" :page-size="pageSize"
			 layout="prev, pager, next, total, sizes" :total="total">
			</el-pagination>
		</footer>
	</div>
</template>

<script>
	export default {
		name: "ui-table",
		model: {
			prop: "currentPage",
			event: "handleCurrentChange"
		},
		props: {
			/* ================================== 表格属性 ================================== */
			columns: {
				type: Array,
				default: () => []
			},
			data: {
				type: Array,
				default: () => []
			},
			isCheckBox: {
				type: Boolean,
				default: false
			},
			isAuto:{
				type: Boolean,
				default: false
			},
			slotHeader:{
				type: Boolean,
				default: false
			},
			isLoad:{
				type: Boolean,
				default: false
			},
			tableHihlightCurrentRow:{/* 是否设置为单选 */
				type: Boolean,
				default: false
			},
			showheader:{
				type: Boolean,
				default: true
			},
			/* ================================== 分页属性 ================================== */
			isPagination: {
				type: Boolean,
				default: false
			},
			currentPage: {
				type: Number,
				default: 1
			},
			total: {
				type: Number,
				default: 400
			},
			pageSize: {
				type: Number,
				default: 10
			}
		},
		data() {
			return {
				myColums: [],
				pagerCount: 5,
				fontSize: document.querySelector('html').style.fontSize.replace('px', '')
			}
		},
		watch: {
			fontSize: {
				handler: function(value) {
					if(value){
						this.tableRefresh();
					}
				},
				immediate: true,
			},
			column: {
				handler: function(value) {
					if(value){
						this.tableRefresh();
					}
				},
				immediate: true,
			}
		},
		computed: {
			selectWidth: function() {
				return 2.5 * this.fontSize;
			}
		},
		created:function(){
			window.onresize = ()=>{
				this.fontSize = document.querySelector('html').style.fontSize.replace('px', '')
			}
		},
		methods: {
			tableRefresh:function(){
				this.myColums = this.columns.map(column => {
					if (column.width && column.width.indexOf("rem") >= 0) {
						const iw = Number(column.width.replace('rem', '')) * this.fontSize;
						return Object.assign({}, column, {
							width: iw
						});
					}
					return column;
				});
			},
			/* ================================== 表格事件 ================================== */
			indexMethod: function(index) {/* 序号方法 */
				return ((this.currentPage - 1) * this.pageSize) + (index + 1);
			},
			rowClick: function(row, column, event) {/* 行点击事件 */
				this.$emit("rowClick", row);
        this.$refs.multipleTable.toggleRowSelection(row);
			},
			handleSelectionChange: function(e) {/* 多选选择改变时 */
				this.$emit("handleSelectionChange", e);
			},
			tablehandleCurrentChange: function(e){/* 单选选中时 */
				this.$emit("tablehandleCurrentChange", e);
			},
			/* ================================== 分页事件 ================================== */
			handleSizeChange: function(e) {
				this.$emit("handleSizeChange", e);
			},
			handleCurrentChange: function(e) {/* 页码改变时事件 */
				this.$emit("handleCurrentChange", e);
			},
			/* ================================== 外部调用方法 ================================== */
			toggleSelection:function(rows){
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			clearSelection:function(){
				this.$refs.multipleTable.clearSelection();
			},
			setCurrentRow:function(row){
				this.$refs.multipleTable.setCurrentRow(row);
			},
			handleClick:function(row){
				this.$emit("handleClick",row)
			}
		}
	}
</script>

<style lang="scss">
	.ui-table {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.outTime {
			color: red;
		}

		>center {
			flex: 1;
			overflow: hidden;

			.el-table {
				background-color: transparent;
				font-size: 1rem;

				.el-table__header-wrapper {
					tr {
						background-color: transparent;

						th {
							font-size: 1rem;
							background-color: rgba(0, 0, 0, 0.8);
							color: rgba(255,255,255,0.75);
							padding: 0.5rem 0;
							border-bottom: 0.0625rem solid rgba(255,255,255,0.5);

							>.cell {
								line-height: 1.75rem;
							}
						}
					}
				}

				.el-table__empty-text {
					color: rgba(255,255,255,0.75);
				}

				&::before {
					height: 0.0625rem;
					background-color: rgba(255,255,255,0.5);
				}

				tr {
					background-color: transparent;

					td {
						border-bottom: 0 solid rgba(255,255,255,0.75);
						color: rgba(255,255,255,0.75);
						padding: 0.5rem 0;
					}

					&:hover {
						td {
							background-color: rgba(45,92,171, 0.3);
						}

					}
				}
				tr.current-row{
					td{
						background-color: rgba(45,92,171, 0.3);
					}
				}

				.cell {
					line-height: 1.5rem;
					padding: 0 0.5rem;
				}

				.cell.el-tooltip {
					min-width: 1rem;
				}
			}

			.el-table--striped {
				.el-table__body {
					tr.el-table__row--striped {
						td {
							background-color: rgba(0, 0, 0, 0.8);
						}

						&:hover {
							td {
								background-color: rgba(45,92,171, 0.3);
							}
						}
					}
					tr.current-row{
						td{
							background-color: rgba(45,92,171, 0.3);
						}
					}
				}
			}
		}
		.el-button--primary{
			background:#2957A3;
			border-color:#2957A3;
		}
		.el-button--small{
			font-size: 1rem;
		}
		.el-checkbox__input.is-checked{
			.el-checkbox__inner{
				background-color:#2D5CAB;
				border-color:#2D5CAB;
			}
		}
		.el-checkbox__input.is-indeterminate{
			.el-checkbox__inner{
				background-color:#2D5CAB;
				border-color:#2D5CAB;
			}
		}
	}
</style>
